<script>
$(function() {
	$('#add_image').click(function() {
		$('#add_image_box').dialog({
			title: "upload image",
			width: 500, 
			height: 300,
			dragable: false,
			resizable: false,
			modal: true,
		});
	});

	
	$('.image').click(function(event){
		event.preventDefault();
		enlargeImage($(this).attr('href'), $(this).attr('alt'), $(this).index());
	});   
	
});

enlargeImage = function(uri, title, index) {
	$('#img').attr('src', uri);
	$('#img').attr('height', 400);
	$('#img_description').text($('.image').eq(index).attr('description'));

	
	$('#img_dialog').dialog({
		open: function(event, ui){
			if (index == 0)
				$('.ui-dialog-buttonpane button:contains("Prev")').button('disable');
			if (index == $('.image').length - 1) 
				$('.ui-dialog-buttonpane button:contains("Next")').button('disable');
		},
		width: 630,
		height: 550,
		modal: true,
		title: title,
		resizable: false,
		dragable: false,
		buttons: [
		{
			text: 'Prev',
			click: function() {
				
					index = index-1;
					enlargeImage(
						$('.image').eq(index).attr('href'),
				  		$('.image').eq(index).attr('alt'),
				  		index
					);
				
	  		}
		},
		{
			text: "Next", 
			click: function() {
				
					index = index+1;
					enlargeImage(
						$('.image').eq(index).attr('href'),
						$('.image').eq(index).attr('alt'),
						index
					);
				
	  		}
		}
		]
		
	});
}
</script>
<!--------------------------------------------------------------------------------->


<div class="events index">
	<h2><?php echo $gallery['Gallery']['name']; ?></h2>
	
	<table>
		<tr><td class="actions">
		<?php echo $this->Html->link('Add Images', '#', array('id'=>'add_image'))?>
		<div id="add_image_box" style="display: none;"> <?php 
			echo $this->Form->create('Gallery', array('action'=>'add_images/'.$gallery['Gallery']['id'], 'enctype' => 'multipart/form-data'));
    		echo $this->Form->input('image',array('label'=>'', 'type'=>'file'));
    		echo $this->Form->input('description', array('label'=>'Image Description', 'type'=>'textarea'));?>
    		<input type="submit" value="Upload" style="float:left;">
    		<?php echo $this->Form->end();?>
    	</div>
		</td></tr>
	</table>
	

	<div id='gallery_image_displaying'>
	<?php if ($images): ?>
	<?php foreach ($images as $image): ?>
	<?php 
		$img_path = 'gallery/' . $image['GalleryImage']['gallery_id'] . '/' . $image['GalleryImage']['id'] .'.jpg';
		echo $this->Html->link( $this->Html->image($img_path, array('width'=>113, 'height'=>100)), 
								'/img/'.$img_path, 
								array('class'=>'image', 'alt'=>$image['GalleryImage']['name'], 'description'=>$image['GalleryImage']['description'], 'escape'=>false)); 
	?>
	
	<?php endforeach; ?>
	<?php endif; ?>
	</div>
	<div id="img_dialog" style="display: none;">
		<img id="img" src="" width='' height='' alt=''/>
		<p id="img_description"></p>
	</div>	
<div style="clear: both;"></div>
</div>
